<template>
    <view class="columnbox wdh-100 content">
        <view @click="showDetail(item.id)" v-for="(item,index) in infolist" :key='index' class="columnbox one-info">
            <view class="rowbox wdh-100 spb als">
                <view class="rowbox">
                    <image :src="item.avatar" mode="aspectFill" class="user-img"></image>
                    <view class="columnbox als">
                        <view class="userName">{{item.userName}}</view>
                        <view class="desc">{{item.createTime}} 加入</view>
                    </view>
                </view>
                <view class="columnbox" style="align-items: flex-end;">
                    <view class="rowbox desc" style="margin: 0;">
                        详情 <view style="margin-left: 10rpx;">
                            <u-icon name="arrow-right" size="24rpx"></u-icon>
                        </view>
                    </view>
                    <view class="phonenumber">{{item.phonenumber}}</view>
                </view>
            </view>
            <view class="rowbox wdh-100 jus b-box">
                <view>已完成订单：0 <text style="margin-left: 40rpx;">收入金额：¥0</text> </view>
            </view>
        </view>
        <view class="wdh-100" style="height: 200rpx;"></view>
        <view class="rowbox wdh-100 bottom-box">
            <view class="rowbox wdh-100 send-btn" @click="addStaff">新增人员</view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                refreshflag: false,
                pageNum: 1,
                infolist: [],
                total: 0
            };
        },
        onShow() {
            if (this.refreshflag) {
                this.refreshflag = false
                this.infolist = []
                this.pageNum = 1
                this.getList()
            }
        },
        onLoad() {
            this.getList()
        },
        onReachBottom() {
            if (this.infolist.length < this.total) {
                this.pageNum++
                this.getList()
            }
        },
        methods: {
            showDetail(id) {
                uni.navigateTo({
                    url: '/packageA/staff/detail?id=' + id
                })
            },
            getList() {
                this.$req.get('/xcx/manager/stationWorker/list', {
                    pageSize: 20,
                    pageNum: this.pageNum,
                }).then(res => {
                    this.infolist = this.infolist.concat(res.data.rows)
                    this.total = res.data.total
                })
            },
            addStaff() {
                uni.navigateTo({
                    url: './add'
                })
            }
        }
    }
</script>


<style lang="scss" scoped>
    .content {
        background: #f7f8fa;
        min-height: 100vh;
        justify-content: flex-start;
        font-family: PingFang SC;
        width: 100%;
        overflow: hidden;
    }

    .one-info {
        margin: 10rpx 0;
        width: 710rpx;
        border-radius: 20rpx;
        background: #fff;
        padding: 32rpx 32rpx;
    }

    .user-img {
        width: 100rpx;
        height: 100rpx;
        border-radius: 100rpx;
        margin-right: 20rpx;
    }

    .userName {
        font-size: 32rpx;
        line-height: 40rpx;
    }

    .desc {
        font-size: 28rpx;
        margin-top: 20rpx;
        color: #7c7e90;
        line-height: 40rpx;
    }

    .phonenumber {
        font-size: 28rpx;
        margin-top: 20rpx;
        line-height: 40rpx;
    }

    .b-box {
        border-top: #eff1f7 solid 1px;
        font-size: 28rpx;
        margin-top: 20rpx;
        padding-top: 20rpx;
        color: #7c7e90;
    }
</style>